<template>
  <dt-modal-edit
    ref="edit"
    title="设置目标取值条件"
    :width="600"
    @ok="onOk"
    @cancelData="cancelData"
    :okText="okText">
    <div class="targetVal" v-if="flag">
      <div class="tips">
        <Icon type="md-alert" class="tips_icon" />
        设置后，将在案场列表中，显示对应的“案场目标”或“顾问目标”的设定情况
      </div>
      <div class="caseTarget">
        <div class="p1">
          案场目标
          <i-switch v-model="targetConfigVal.buildingTargetStatus" @on-change="caseChange" />
        </div>

        <div class="caseTargetList">
          <p v-for="(item, index) in targetConfigVal?.targetDetailsConfigList" :key="index">
            <Checkbox
              v-if="item.targetGroupType == 0"
              v-model="item.hasCheck"
              :disabled="!targetConfigVal.buildingTargetStatus">
              {{ item.configName }}
            </Checkbox>
          </p>
        </div>
      </div>
      <div class="caseTarget caseTarget1">
        <div class="p1">
          顾问目标
          <i-switch v-model="targetConfigVal.userTargetStatus" @on-change="caseChange" />
        </div>

        <div class="caseTargetList">
          <p v-for="(item, index) in targetConfigVal?.targetDetailsConfigList" :key="index">
            <Checkbox
              v-if="item.targetGroupType == 1"
              v-model="item.hasCheck"
              :disabled="!targetConfigVal.userTargetStatus">
              {{ item.configName }}
            </Checkbox>
          </p>
        </div>
      </div>
    </div>
  </dt-modal-edit>
</template>

<script>
  import clueTargetMgr from '@/biz/clueTarget/clueTarget'
  export default {
    data() {
      return {
        okText: '确定',

        caseSwi: true,
        single: true,
        targetConfigVal: null,
        flag: false
      }
    },
    methods: {
      caseChange() {},
      onOk() {
        let params = this.$tool.deepClone(this.targetConfigVal)
        params.buildingTargetStatus = Number(params.buildingTargetStatus)
        params.userTargetStatus = Number(params.userTargetStatus)

        params.targetDetailsConfigList.forEach((item) => {
          item.hasCheck = Number(item.hasCheck)
        })

        clueTargetMgr.updateTargetConfig(params).then((res) => {
          this.$emit('chooseTask')
          this.$refs.edit.hide()
        })
      },

      show(val) {
        this.targetConfigVal = val
        this.flag = true
        this.$refs.edit.show()
      },
      cancelData() {},
      hide() {
        // this.flag = false
        this.$refs.edit.hide()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .targetVal {
    .tips {
      display: inline-block;
      padding: 5px 10px;
      text-align: right;
      line-height: 32px;
      font-size: 14px;
      background: rgba(254, 252, 236, 1);

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
        vertical-align: sub;
      }
    }
    .caseTarget {
      // padding: 10px 30px;
      .p1 {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
      }
      .caseTargetList {
        display: flex;
        flex-wrap: wrap;

        p {
          width: 33.33%;
          margin-top: 10px;
          padding-left: 30px;
        }
      }
    }
    .caseTarget1 {
      margin-top: 40px;
    }
  }
</style>
